<template>
    <div class="container" :style="{height:customBar()*2+12+'rpx'}" :class="bgColor">
        <div class="custom" :style="{height:customBar()+'rpx',paddingTop:statusBar()+'px'}">
            <div class="search" v-if="isSearch">
                <input @keyup.enter.native="search" type="text" style="font-family: 'ALKATIP UI'" placeholder-style="font-family: 'ALKATIP UI'" confirm-type="search" @confirm="search($event)" v-model="searchQuery" placeholder="ئىزدىمەكچى بولغان كىنونى كىرگۈزۈڭ">
                <i @click="search" class="myfont icon-sousuo"></i>
            </div>
            <div class="title" v-if="title&&!showIcon">
                <span>{{title}}</span>
            </div>
            <div class="home" v-if="showIcon">
                <span class="icons">
                    <i @click="navigateBack" class="myfont icon-iconfontjiantou2"></i>
                    <i @click="backToHome" class="myfont icon-zhuye2"></i>
                </span>
                <span class="title">{{title}}</span>
                <span></span>
            </div>
            <!-- <h1>{{globalData.clientRect}}</h1> -->
        </div>
    </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { $Toast } from "@/utils/index";
export default {
    props: {
        bgColor: {
            type: String,
            default: "bg-gradual-pink"
        },
        isSearch: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        showIcon: {
            type: Boolean,
            default: false
        }
    },
    mounted() {},
    methods: {
        ...mapActions(["statusBarHeight"]),
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        search(e) {
            if (!this.searchQuery) {
                $Toast({
                    content: "كىنو ئىسمىنى كىرگۈزۈڭ",
                    icon: "warning"
                });
                setTimeout(() => {
                    $Toast.hide();
                }, 1500);
            } else
                wx.navigateTo({
                    url: "/pages/VideoList/VideoList?from=search&query=" + this.searchQuery
                });
        },
        navigateBack() {
            wx.navigateBack({
                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
        },
        backToHome() {
            wx.switchTab({ url: "/pages/Home/Home" });
        }
    },
    data() {
        return {
            searchQuery: ""
        };
    }
};
</script>

<style lang="scss" scoped>
@import url("../assets/CSS/global.css");
.container {
    font-family: "ALKATIP UI" !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    .custom {
        height: 100%;
        .search {
            width: 80%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-bottom: 10rpx;
            box-sizing: border-box;
            position: relative;
            input {
                display: inline-block;
                box-sizing: border-box;
                width: 85%;
                background-color: #fff;
                border: none;
                outline: none;
                border-radius: 30rpx;
                margin-left: 29rpx;
                height: 80%;
                padding: 5rpx 25rpx;
                font-size: 27rpx;
                text-align: right;
                direction: rtl;
                font-family: "ALKATIP UI" !important;
            }
            i {
                color: #999;
                position: absolute;
                left: 38rpx;
                font-size: 50rpx;
            }
        }
        .title {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #f0f0f0;
            font-size: 36rpx;
            transform: scaleY(0.8);
        }
        .home {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            .icons {
                margin-left: 10rpx;
                color: #fff;
                height: 68%;
                box-sizing: border-box;
                border: 1rpx solid #f0f0f063;
                border-radius: 44rpx;
                width: 140rpx;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                :nth-child(1) {
                    transform: rotateY(180deg);
                }
                i {
                    font-size: 33rpx;
                    margin: 0 15rpx;
                }
            }
            .title {
                margin-right: 184rpx;
            }
        }
    }
}
</style>